/* 
    陆游管理：
        /： 首页
        /detail/:id :新闻详情首页
        /personal： 个人中心
        /login： 登陆页面
        /store： 收藏
        /update： 更新个人信息
        404  
*/

import React, { Suspense } from "react";
import { Routes, Route, useNavigate, useLocation, useParams, useSearchParams } from 'react-router-dom'
import routers from "./route";
// mobile 蒙层
import { Mask, DotLoading } from "antd-mobile";


/* 统一路由配置  子组件*/
const Element = function Element(props) {
    let { component: Component, meta } = props
    console.log(Component, '22')
    /*  利用meta元信息，修改页面title */
    let { title } = meta || {}
    document.title = title

    /* 可以获取路由中的信息，基于属性传递给组件 */
    const navigate = useNavigate(), // 用于编程式导航
        location = useLocation(), // 获取当前的路由对象，path name， hash , search ,state
        paramas = useParams(),  // 动态的获取参数
        [usp] = useSearchParams() // 用来读取和设置参数


    return <Component paramas={paramas} navigate={navigate} location={location} usp={usp} />
}

export default function RouterView() {
    return <Suspense fallback={
        <Mask visible={true} >
            <DotLoading color='primary' style={{
                "fontSize": "30px",
                "position": "absolute",
                "top": "50%",
                "left": "50%",
                "transform": "translate(-50% , -50%)"
            }} />
        </ Mask>

    }>
        <Routes>
            {routers.map((itm, index) => {
                let { name, path } = itm
                return < Route key={name} path={path} element={<Element {...itm} />} />
            })}
        </Routes>
    </Suspense>
}

console.log('a')

